<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="tit">{{msg}}</title>
    <script type="text/javascript" src="../k1/vue.min.js"></script>
</head>
<body>
    <div id="ask"><!--vue不能控制body和html的标签-->
        <!--鼠标左键-->
        <div :style="left_style" @click.left="mouseclick('左')">左</div>
        <!--鼠标中键-->
        <div :style="middle_style" @click.middle="mouseclick('中')">中</div>
        <!--鼠标右键-->
        <!--加prevent为了屏蔽浏览器自带右键-->
<!--        <div :style="right_style" @contextmenu.prevent="mouseclick('右')">右</div>-->
        <div :style="right_style" @click.right="mouseclick('右')">右</div>

    </div>

</body>
<script>
    var vue = function (options){new Vue(options)};
    vue({
        el:'#tit',
        data:{
            msg:'Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle'
        }
    });
    var app = vue({
        el:'#ask',
        data:{
            left_style:{border:'solid 2px red',height:'200px'},
            right_style:{border:'solid 2px blue',height:'200px'},
            middle_style:{border:'solid 2px yellow',height:'200px'},
        },
        methods:{
            mouseclick(where){
                alert('点击鼠标'+where+'键触发');
            }
        }
    });

</script>


</html>
